<template>
  <van-grid :column-num="2" square :gutter="10">
    <van-grid-item icon="photo-o"  v-for="item,index in brandList" :key="index" :text="(item as any).brand" @click="toList(currCategory as string,(item as any).brand)"/>
  </van-grid>
</template>

<script setup lang="ts">
import  type { Ref } from 'vue';
import { ref,reactive, watch,onMounted,computed, watchEffect } from 'vue';
import { getCategoryListAPI,getBrandListAPI } from '@/api/product';
import { showFailToast } from 'vant';
import { defineProps,defineEmits,defineOptions,defineModel,defineSlots } from 'vue';
import router from '@/router';

let emits = defineEmits(['update:aaa'])
let model = defineModel('aaa') // 只能接受一个，像配置需要配置多个，多写一个

let brandList = ref([])

// 品牌信息
let currCategory = computed(()=>{ // 此属性需要通过父组件传入
  return model.value
  // categoryList.value ? categoryList.value[activeCategory.value] : ""
})

const getBrandList = async()=>{
  if(currCategory.value){ // category的值
    try{
      let result = await getBrandListAPI({ 
        category:currCategory.value
      })
      console.log("分类下商品请求成功",currCategory.value, result);
      brandList.value = result.data
    }catch(err:any){
      showFailToast(err.message)
    }
  }
  }
  const toList = (category:string,brand:string)=>{
    router.push({path:"/list",query:{category,brand}})
  }
  watch(currCategory,()=>{
    getBrandList()
  })
  onMounted(async ()=>{
    await getBrandList()
  })
</script>

<style lang="scss" scoped>

</style>